<!--
 * @Author: decadent_zq 9867470+decadent-zq@user.noreply.gitee.com
 * @Date: 2023-04-05 08:28:48
 * @LastEditors: decadent_zq 9867470+decadent-zq@user.noreply.gitee.com
 * @LastEditTime: 2023-04-06 15:44:50
 * @FilePath: \absolutuniq_pc\src\components\classify\ShopsClassify.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
      <div class="classify" style="margin-left:24%">
          <!-- 整个图片分类 -->
            <el-row>
              <el-col v-for="(item, index) in BigclassifyList" :key="index" :span="12"  style="height: 380px">
                <!-- 大类型 -->
                    <!-- 图片 -->
                    <el-card :body-style="{ padding: '0px' }" class="box-card">
                    <div style="text-align:center;" class="image-container" >
                    <div class="imgDiv">
                    <img :src="$imageUrl+'?id='+item.imageId" style="width: 300px; height: 205px" @click="ClassifyList(item.id)"/>
                    <span class="overlay">{{ item.back }}</span>
                    <el-button class="button" @click="ClassifyList(item.id)" icon="el-icon-caret-right">立即查看</el-button>
                    </div>
                    <p  style="font-family: STSong;letter-spacing: 10px;margin: 6px 0;text-align:center;" >
                      {{ item.engName }}
                    </p>
                    <p style=" font-size: 27px; font-family: STFangsong; margin: 6px 0;text-align: center;">
                      {{ item.typeName }}
                    </p>
                    <br/>
                    </div>
                    </el-card>
              </el-col>
            </el-row>
     </div>
</template>

<script>
export default {
   name:"classify",
   data(){
    return{
     BigclassifyList: [
      ],
    }
   },
    mounted(){
   this.getBigClassify();
  },
   methods:{
        //全查大分类
    getBigClassify(){
      this.$axios.get('/commodity/classify/getBigClassify', {
      // params:{
      //   id:this.id
      // }
        })
        .then((res) => {      
          if (res.data.flag) {
            this.BigclassifyList = res.data.data;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        })

    },
// ClassifyList(){
//    this.$router.push("/PageClassifyList");
// }
        //跳转小分类全查页面
    ClassifyList(id){
       this.$router.push({
        //跳转的地址
        path:'/PageClassifyList',
        query: {
          //id是前端声明的大分类id
          id: id
         }
        })
    }
   }
     }
</script>
<style scoped>
 .classify{
   margin: 0 auto;
   width: 70%;
 }
 .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 50%;
  }
  
/* 图片定位*/
.imgDiv span{
  position: absolute;
  bottom: 0;
}
/* 图片定位*/
.imgDiv{
  position: relative;
}
/* 图片 文字定位*/
.image-container {
  position: relative;
   width:100%
}

.overlay {
  font-weight:600;
  font-size:20px;
  opacity: 0;
  background-color: rgba(111, 109, 109, 0.5);
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items:flex-end;
  justify-content:flex-start;
  transition: opacity 0.6s;
}
.button {
  font-weight: 600;
  border-radius:10px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(57, 201, 115);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.image-container:hover .button {
  opacity: 1;
}
.image-container:hover .overlay {
  opacity: 1;
}
/**
    鼠标移入hover动画效果
 */
.policy-center-list-li:hover img{
    transform: scale(1.3);
    transition: all 0.4s ease 0s;
    -webkit-transform: scale(1.3);
}
.policy-center-list-li:hover .text-box{
    transform:translateY(-60px);
    transition: all 0.4s ease 0s;
    -webkit-transform: translateY(-60px);
}
/**
    鼠标移开恢复特效
 */
.policy-center-list-li img{
    transition: all 0.4s ease 0s;
}
.policy-center-list-li .text-box{
    transition: all 0.4s ease 0s;
}
</style>